<template>
  <van-tabbar class="home-tabbar" active-color="rgb(132, 95, 63)" v-model="active">
    <van-tabbar-item icon="home-o">
      <span>首页</span>
      <template #icon>
        <i class="tab-bar-icon-style" :style="imgStyle(0)" alt></i>
      </template>
    </van-tabbar-item>
    <van-tabbar-item icon="search">
      <span>分类</span>
      <template #icon>
        <i class="tab-bar-icon-style" :style="imgStyle(1)" alt></i>
      </template>
    </van-tabbar-item>
    <van-tabbar-item icon="friends-o">
      <span>购物车</span>
      <template #icon>
        <i class="tab-bar-icon-style" :style="imgStyle(2)" alt></i>
      </template>
    </van-tabbar-item>
    <van-tabbar-item icon="setting-o">
      <span>我的</span>
      <template #icon>
        <i class="tab-bar-icon-style" :style="imgStyle(3)" alt></i>
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      imgPos: [
        {
          active: { "background-position": "0px 11.1%" },
          inactive: {},
        },
        {
          active: { "background-position": "0px 33.3%" },
          inactive: { "background-position": "0px 22.2%" },
        },
        {
          active: { "background-position": "0 77.7%" },
          inactive: { "background-position": "0px 66.6%" },
        },
        {
          active: { "background-position": "0 99.9%" },
          inactive: { "background-position": "0px 88.8%" },
        },
      ],
      icon: {
        active: "demo/src/assets/tab_images.png",
      },
    }
  },
  methods: {
    imgStyle(idx) {
      return idx === this.active
        ? this.imgPos[this.active]["active"]
        : this.imgPos[idx]["inactive"];
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-bar-icon-style {
  display: flex;
  width: 26.496px;
  height: 26.496px;
  margin-top: 4.416px;
  background-size: 100%;
  background-image: url("https://img.youpin.mi-img.com/static/public/tab/tab_images.png");
}

#app /deep/ .home-tabbar {
  height: 55.2px;
}

.home-tabbar {
  /deep/ .van-tabbar-item__text {
    margin-top: 4.412px;
    font-size: 13.248px;
  }
}
</style>